
<template>
    <div>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>采购订单基础信息</title>

        <!--------------------------------------------------------------------------->

        <div class="purchase-order-container">
            <h1>采购订单基础信息</h1>
            <el-progress :percentage="100"  :show-text="false"></el-progress>
            <div class="tips">
            </div>
            <el-form ref="ruleForm" :model="warehouse" >
                <div class="supplier-section">
                    <div class="content">
                        <label for="supplier-name" class="supplier">选择供应商
                            <button type="text" @click="dialogVisible = true" id="supplier-contact-click" class="el-icon-coin">选择数据</button>
                            <el-dialog
                                    title="选择数据"
                                    :visible.sync="dialogVisible"
                                    :before-close="handleClose"
                                    width="1000px">
                                <el-progress :percentage="100"  :show-text="false"></el-progress>
                                <span>
                                    <el-button @click="dialogFormVisible = true" type="primary" icon="el-icon-plus">添加</el-button>
                                     <el-dialog title="供应商注册" :visible.sync="dialogFormVisible" width="70%" >
                  <div class="form-scroll-container">
                      <el-progress :percentage="10"  :show-text="false"></el-progress>
                  <el-form :label-position="labelPosition" label-width="80px" :model="combinedObject" ref="ruleForm" >
                      <el-row :gutter="20">
                      <el-col :span="12" >
                          <el-form-item label="供应商编码">
                              <el-input v-model="combinedObject.supplier.supplierCode"  placeholder="自动生成无需输入" :disabled="true"></el-input>
                          </el-form-item>
                          </el-col>
                          <el-col :span="12" >
                          <el-form-item label="供应商名称" prop="supplier.supplierName" :rules="[
                                { required: true, message: '请输入供应商名称', trigger: ['blur', 'change'] },]">
                              <el-input v-model="combinedObject.supplier.supplierName"></el-input>
                          </el-form-item>
                         </el-col>
                      </el-row>
                      <el-row :gutter="20">
                      <el-col :span="12" >
                              <el-form-item label="供应商分类" prop="supplier.supplierType"
                                            :rules="[
                                { required: true, message: '请选择供应商分类', trigger: ['blur', 'change'] },]">
                                  <template>
                                      <el-select v-model="combinedObject.supplier.supplierType" placeholder="请选择">
                                          <el-option
                                                  v-for="supplierType in supplyTypes"
                                                  :key="'supplierType'+supplierType.dictCode"
                                                  :label="supplierType.dictLabel"
                                                  :value="supplierType.dictLabel"
                                          >
                                          </el-option>
                                      </el-select>
                                  </template>
                              </el-form-item>
                          </el-col>
                          <el-col :span="12" >
                                  <el-form-item label="供应商状态">
                                      <div style="position: relative;">
                                          <el-input v-model="combinedObject.supplier.supplierState" placeholder="潜在供应商" disabled></el-input>
                                          <el-button disabled type="danger" size="small" style="position: absolute; left: 15px; top: 5px;">潜在供应商</el-button>
                                      </div>
                                  </el-form-item>
                          </el-col>
                                    <el-col :span="12">
                                              <el-form-item label="联系人姓名" prop="contactinfo.name" :rules="[
                                { required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] },]">
                                                  <el-input v-model="combinedObject.contactinfo.name"></el-input>
                                              </el-form-item>
                                    </el-col>
                                    <el-col :span="12" >
                                              <el-form-item label="联系人电话" prop="contactinfo.phone" :rules="[
                                { required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] },]">
                                                  <el-input v-model="combinedObject.contactinfo.phone"></el-input>
                                              </el-form-item>
                                    </el-col>
                          </el-row>
                  </el-form>
                  </div>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="submitMyForm('combinedObject')">确 定</el-button>
                  </div>
              </el-dialog>
                                        <el-table
                                                ref="supplierTable"
                                                :data="supplierPageInfo.list"
                                                max-height="100%"
                                                border
                                                style="width: 100%">
                                      <el-table-column
                                              fixed="left"
                                              type="selection"
                                              width="55">
                                      </el-table-column>
                                      <el-table-column
                                              prop="supplierName"
                                              label="供应商名称"
                                              width="150">
                                      </el-table-column>
                                      <el-table-column
                                              prop="supplierCode"
                                              label="供应商编码"
                                              width="150">
                                      </el-table-column>
                                      <el-table-column
                                              prop="supplierType"
                                              label="供应商分类"
                                              width="150">
                                        <template slot-scope="scope">
                                            <el-button v-if="scope.row.supplierType === '零件供应商'" type="warning">{{ scope.row.supplierType }}</el-button>
                                            <el-button v-else-if="scope.row.supplierType === '集合供应商'" type="success">{{ scope.row.supplierType }}</el-button>
                                            <el-button v-else-if="scope.row.supplierType === '成品供应商'" type="danger">{{ scope.row.supplierType }}</el-button>
                                        </template>
                                      </el-table-column>
                                        <el-table-column
                                                prop="supplierState"
                                                label="供应商状态"
                                                width="150">
                                            <template slot-scope="scope">
                                                <el-button v-if="scope.row.supplierState === '合格供应商'" type="success">{{ scope.row.supplierState }}</el-button>
                                                <el-button v-else-if="scope.row.supplierState === '潜在供应商'" type="danger">{{ scope.row.supplierState }}</el-button>
                                                <el-button v-if="scope.row.supplierState === '一级供应商'" type="success">{{ scope.row.supplierState }}</el-button>
                                                <el-button v-else-if="scope.row.supplierState === '二级供应商'" type="danger">{{ scope.row.supplierState }}</el-button>
                                                <el-button v-if="scope.row.supplierState === '三级供应商'" type="success">{{ scope.row.supplierState }}</el-button>
                                            </template>

                                        </el-table-column>
                                        <el-table-column
                                              prop="supplierSign.startTime"
                                              label="签约开始日期"
                                              width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="supplierSign.endTime"
                                                label="签约结束日期"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="contactinfo.name"
                                                label="联系人姓名"
                                                width="120">
                                        </el-table-column>
                                        <el-table-column
                                                prop="contactinfo.phone"
                                                label="联系人电话"
                                                width="120">
                                        </el-table-column>
                                    </el-table>
                                    <template>
                                      <el-pagination
                                              @size-change="handleSizeChange"
                                              @current-change="handleCurrentChange"
                                              :current-page="currentPage"
                                              :page-sizes="[5, 10, 15, 20]"
                                              :page-size="pageSize"
                                              layout="total, sizes, prev, pager, next, jumper"
                                              :total="total"
                                      >
                                      </el-pagination>
                                      </template>
                                </span>
                                <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="handleConfirms" >确 定</el-button>
                                    <template>
                                      <el-pagination
                                              @size-change="handleSizeChange"
                                              @current-change="handleCurrentChange"
                                              :current-page="currentPage"
                                              :page-sizes="[5, 10, 15, 20]"
                                              :page-size="pageSize"
                                              layout="total, sizes, prev, pager, next, jumper"
                                              :total="total"
                                      >
                                      </el-pagination>
                                    </template>
                            </span>
                            </el-dialog>

                        </label>
                        <label class="supplier" style="margin-left: 4%">供应商名称
                            <input type="text" id="supplier-name" placeholder="供应商名称" disabled>
                        </label>
                        <label class="supplier" style="margin-left: 5%">供应商编码
                            <input type="text" id="supplier-code" placeholder="供应商编码" disabled>
                        </label>

                    </div>
                    <div class="content">
                        <label class="supplier">联系人姓名
                            <input type="text" id="supplier-contact-name" placeholder="供应商联系人姓名" disabled style="max-width: 19%">

                        </label>
                        <label class="supplier" style="margin-left: 5%">联系人手机
                            <input type="text" id="supplier-contact-phone" placeholder="供应商联系人手机"disabled>
                        </label>
                        <label for="order-name" class="supplier"style="margin-left: 4%">采购订单名称
                            <input type="text" id="order-name">
                        </label>
                    </div>
                    <div class="content">
<!--                        <label class="supplier">订单签订日期-->
<!--                            <input type="date" id="order-date" :value="orderSignDate" style="max-width: 17.5%">-->
<!--                        </label>-->
                        <label class="supplier" style="margin-left: 3%;
        margin-bottom: 100px;">订单签订日期
                            <el-date-picker
                                    v-model="orderSignDate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="max-width: 17.5%">
                            </el-date-picker>
                        </label>
<!--                        <label class="supplier" style="margin-left: 4%" >订单交付日期-->
<!--                            <input type="date" id="delivery-date">-->
<!--                        </label>-->
                        <label class="supplier" style="margin-left: 5.5%;
        margin-bottom: 13px;" >订单交付日期
                            <el-date-picker
                                    v-model="warehouse.deliveryDate"
                                    type="date"
                                    :picker-options="pickerOptions"
                                    placeholder="选择日期"
                                    style="max-width: 320px" >
                            </el-date-picker>
                        </label>
                        <label for="order-name" class="supplier" style="margin-left: 7.5%">采购订单编号
                            <input type="text" id="order-number" placeholder="自动生成无需填写" disabled>
                        </label>
                    </div>
                    <div class="content">
                        <label for="purchaser" class="supplier" >采购负责人
                            <button type="text" @click="dialogVisible1 = true" id="purchaser" >{{ warehouse.warehouseLeader || '+ 选择成员' }}</button>
                        </label>
                        <el-dialog
                                title="成员列表"
                                :visible.sync="dialogVisible1"
                                width="30%">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div>
                                        <el-tree
                                                :data="companyDepartmentName"
                                                node-key="id"
                                                :props="defaultProps"
                                                :default-expanded-keys="[1]"
                                                @node-click="handleNodeClick">
                                        </el-tree>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <!-- 显示选中部门的领导人信息 -->
                                    <div>
                                        <span>选中部门的员工列表:</span>
                                        <br>
                                        <div id="chooseLeader" v-for="(employee, index) in employeesInDepartment" :key="index" class="emypolo">
                                            <span @click="selectEmployee(employee)" >{{employee.name}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible1 = false">取 消</el-button>
                                <el-button type="primary" @click="handleConfirm" >确 定</el-button>
                            </span>
                        </el-dialog>

                        <label  class="supplier" prop="companyDepartmentId">采购归属部门
                            <button type="text" @click="dialogVisible2 = true" id="person2" disabled>{{ warehouse.companyDepartmentId || '选择成员之后自动获取' }}</button>

                        </label>
                    </div>
                </div>

                <!--------------------------------------------------------------------------------------------->

                <h1>采购产品明细</h1>
                <el-progress :percentage="100"  :show-text="false"></el-progress>

                <el-form-item label="入库仓库" prop="warehouse.name"
                              :rules="[
                { required: true, message: '请选择仓库', trigger: ['blur', 'change'] },]"
                              style="margin-top: 2%">
                    <template>
                        <el-select v-model="warehouse.name" placeholder="请选择" style="margin-bottom: 2%">
                            <el-option
                                    v-for="warehouseItem in warehouseList"
                                    :key="warehouseItem.id"
                                    :label="warehouseItem.name"
                                    :value="warehouseItem.name"
                            >
                            </el-option>
                        </el-select>

                        <!------------------------------------->

                        <el-row :gutter="10"  style="margin-top: 10px;"><b>采购产品明细</b></el-row>
                        <el-row :gutter="24">
                            <el-table
                                    :data="tableData"
                                    stripe
                                    border
                                    height="300"
                            >
                                <el-table-column fixed type="index" width="80"></el-table-column>
                                <el-table-column fixed="left" label="操作" width="80">
                                    <template #default="scope">
                                        <el-button type="danger" size="mini" @click="confirmDelete(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed label="选择产品" width="100">
                                    <template #default="scope">
                                        <i class="el-icon-s-goods" @click="handleChooseProduct(scope.row)"></i>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed
                                        prop="productName"
                                        label="产品名称"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="productCode"
                                        label="产品编号"
                                        width="110">
                                </el-table-column>
                                <el-table-column
                                        prop="productBrand"
                                        label="品牌"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="productModels"
                                        label="规格型号"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="priductUnit"
                                        label="单位"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="outWarehouseNum"
                                        label="调出仓可用库存"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="enterWarehouseNum"
                                        label="调入仓可用库存"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="transferNum"
                                        label="本次调拨数量"
                                        width="130">
                                    <template #default="scope">
                                        <el-input size="small" v-model="scope.row.transferNum"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="purchasePrice"
                                        label="采购单价/元"
                                        width="120">
                                    <template #default="scope">
                                        <el-input size="small" v-model="scope.row.purchasePrice"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="totalPrice"
                                        label="产品采购金额合计/元"
                                        width="210">
                                    <template #default="scope">
                                        {{ scope.row.totalPrice }}
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-row>
                                <el-button type="text" size="small" @click="addRuleRow"
                                           style="width: 100px; color: #42b983">十&nbsp;&nbsp;添加
                                </el-button>
                                <el-button type="text" size="small" @click="pasteRow"
                                           style="width: 100px; color: #42b983">十&nbsp;&nbsp;粘贴新增
                                </el-button>
                            </el-row>
                        </el-row>
                        <el-row :gutter="24" style="margin-top: 10px;margin-bottom: 5px">
                            <el-col :span="7">调拨产品总数</el-col>
                            <el-col :span="7">调拨产品采购总额/元</el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="7">
                                <el-input size="small" disabled placeholder="暂无内容"></el-input>
                            </el-col>
                            <el-col :span="7">
                                <el-input size="small" disabled placeholder="暂无内容"></el-input>
                            </el-col>
                        </el-row>
                        <ChooseProductView
                                :open="chooseProductDialog"
                                @close="handleCloseProduct"
                                @chooseProduct="addProductToTable"
                        ></ChooseProductView>
                    </template>
                </el-form-item>

                <!------------------------------------------------------------------------->

                <h1>到货计划</h1>
                <el-progress :percentage="100"  :show-text="false" style="margin-bottom: 2%"></el-progress>




                <button type="submit" id="submit">提交</button>
            </el-form>
        </div>
    </div>
</template>
<script>
    import ChooseProductView from "@/views/manage/warehouse/components/ChooseProductView";
    export default {
        name:"PurchaseOrderView",
        components: {ChooseProductView},
        data() {
            return {
                dialogVisible: false,
                warehouselist: [],
                orderSignDate:"2025-02-11",
                currentPage: 1, // 添加当前页码
                pageSize: 5, // 添加每页显示数量
                companyDepartmentList: [], // 初始化部门列表
                tableData: [
                    {
                        productName: 'ST1L05',
                        productCode: 'CP0006',
                        brand: '意法',
                        productModel: 'ST1L05CPU33R',//规格型号
                        productUnit: '台',
                        outWarehouseNum: 60,//调出仓可用库存
                        enterWarehouseNum: 20,//调入仓可用库存
                        transferNum: "",//本次调拨数量
                        purchasePrice: "",//采购单价/元
                        totalPrice: 0.00,//产品采购金额合计/元
                        isEmpty: false // 新增标志，用于判断是否为空白行
                    }],
                purchaseProductDetails:[
                    {
                        productSupplierId:'',
                        productName:'',//产品名称
                        productCode:'',//产品编码
                        supplierName:'',
                        // 采购单价(含税)/元
                        productUnitPrice:'',
                        // 采购需求数量
                        purchaseNum:'',
                        //产品采购总价/元
                        totalPrice:'',
                    }
                ],
                combinedObject: {
                    supplier:{
                        supplierCode:'',
                        supplierNum:'',
                        supplierName:'',
                        supplierType: '',
                        supplierState:'潜在供应商',
                        supplierAddress:'',
                        invoiceHeader:'',
                        taxNum:'',
                        taxType:'',
                        taxRate:'',
                    },
                    //联系人
                    contactinfo:{
                        name:'',
                        job:'',
                        phone:'',
                        email:'',
                        supplierId:'',
                    },
                },
                supplier: {},
                submitData:{},
                suppliers: [],
                beginTime:'',
                endTime:'',
                supplyTypes:[],
                // 用于存储用户选择的供应类型
                selectedSupplyType: '',
                labelPosition: 'top',
                dialogFormVisible: false,
                chooseProductDialog: false,//选择产品
                selectRows: {},//存储选中的行
                warehouse: {
                    "name":"",
                    companyDepartmentId:'',
                    warehouseLeader:'',
                    delivery: false,
                    deliveryDate: '',
                },
                pickerOptions: {
                    disabledDate: (time) => {
                        const orderSignDate = new Date(this.orderSignDate);
                        return time.getTime() < orderSignDate.getTime();
                    }
                },
                warehouseNatureList:[],
                provinceCityCascade: [],//仓库地址-->后端传输到此
                selectedOptions: [],//仓库地址相关选项
                dialogVisible1: false,//点击仓库主管弹出对话框
                dialogVisible2:false,//点击归属部门弹出对话框
                tempSelectedDepartment: '',//临时存储数据
                tempSelectedLeader: '',
                companyDepartmentName: [], // 存储从后端获取的部门数据
                companyDepartmentId:[],
                defaultProps: {
                    children: 'children',
                    label: 'companyDepartmentName' // 显示部门名称
                },
                employeeList:[],//存储从后端传输过来的所有员工
                employeesInDepartment:[],//存储过滤的(符合所选部门的id下的所有员工)员工们
                brevityCompanyDepartmentId:'',
                supplierPageInfo:{},

            };
        },
        //钩子函数,页面加载结束之后调出从数据库字典中取出来的仓库性质方法
        created() {
            this.getWarehouses();//查询部门
            this.getWarehouseNatureList();//查询部门性质
            this.getProvinceCityCascade();//查询部门地址
            this.getCompanyDepartment();//查询所有部门
            this.getEmployeeList();//查询所有员工
            this.getSuppliers(1);
            this.getProvinceCityCascade();
            this.fetchAllData();
            this.getWarehouseList();
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            this.orderSignDate = `${year}-${month}-${day}`;
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.currentPage = 1;
                this.getSuppliers();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getSuppliers(val);
                this.currentPage = val;

            },
            /*选择产品*/
            handleChooseProduct() {
                this.chooseProductDialog = true
            },
            handleCloseProduct() {
                this.chooseProductDialog = false
            },
            confirmDelete(index) {
                this.$confirm('是否确认删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 用户点击确定，删除本行数据
                    this.tableData.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    // 用户点击取消，关闭提示框，不做任何操作
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
            },
            addRuleRow() {
                this.tableData.push({
                    productName: '',
                    productCode: '',
                    brand: '',
                    productModel: '',
                    productUnit: '',
                    outWarehouseNum: 0,
                    enterWarehouseNum: 0,
                    transferNum: "",
                    purchasePrice: "",
                    totalPrice: 0.00,
                    isEmpty: true // 标记为空白行
                });
            },
            // addRuleRow() {
            //     console.log("123")
            //     this.tableData.push({
            //         date: '2016-05-03',
            //         name: '王小虎',
            //         province: '上海',
            //         city: '普陀区',
            //         address: '上海市普陀区金沙江路 1516 弄',
            //         zip: 200333
            //     })
            // },
            pasteRow() {
            },
            addProductToTable(product) {

                // 检查是否已经存在相同的产品（避免重复添加）
                const isExist = this.tableData.some(item => item.productCode === product.productCode);
                if (isExist) {
                    this.$message.warning('该产品已存在于表格中！');
                    this.handleCloseProduct();
                    return;
                }

                const emptyRow = this.tableData.find(row => row.isEmpty);
                if (emptyRow) {
                    // 找到空白行，将数据填入空白行
                    emptyRow.productName = product.productName;
                    emptyRow.productCode = product.productCode;
                    emptyRow.brand = product.brand;
                    emptyRow.productModel = product.productModel;
                    emptyRow.productUnit = product.productUnit;
                    emptyRow.outWarehouseNum = product.outWarehouseNum;
                    emptyRow.enterWarehouseNum = product.enterWarehouseNum;
                    emptyRow.transferNum = product.transferNum;
                    emptyRow.purchasePrice = product.purchasePrice;
                    emptyRow.totalPrice = product.totalPrice;
                    emptyRow.isEmpty = false; // 标记为非空白行
                } else {
                    // 没有空白行，新生成一行数据
                    this.tableData.push({
                        ...product,
                        isEmpty: false
                    });
                }
                this.handleCloseProduct();
            },
            async fetchAllData() {
                await Promise.all([this.getSupplyTypes()]);
            },
            getSuppliers(pageNum){
                console.log(this.supplier);
                this.$axios.post("manage/supplier/list",this.supplier,{params:{pageNum:pageNum,pageSize:this.pageSize}}).then(
                    response=>{
                        if (response.data) {
                            const data = response.data;
                            console.log(response.data);
                            this.supplierPageInfo = data.supplierPageInfo; // 更新分页信息
                            this.total = data.supplierPageInfo.total; // 更新总数据量

                            this.suppliers = data.supplierPageInfo.list; // 更新供应商列表
                        } else {
                            console.error("请求失败:", response.data.message);
                        }
                    }).catch(error => {
                    console.error("请求错误:", error);
                });
            },
            getWarehouseList() {
                this.$axios.get("/manage/warehouse/check").then(response => {
                    this.warehouseList = response.data;
                }).catch(error => {
                    console.error("获取仓库列表失败:", error);
                });
            },

            async getSupplyTypes() {
                try {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'supplier_type' }
                    });
                    this.supplyTypes = response.data.dataType || [];
                    //console.log('供应类型:', this.supplyTypes);
                } catch (error) {
                    // console.error("获取供应类型数据失败：", error);
                    //alert("获取供应类型失败,请刷新重试");
                }
            },
            handleConfirms() {
                // 获取表格选中行数据
                const selectedRows = this.$refs.supplierTable.selection;
                if (selectedRows.length > 1) {
                    // 若选中行数大于 1，弹出提示对话框
                    this.$message.warning('只能选择一组数据');
                    return;
                }
                if (selectedRows.length === 1) {
                    const selectedSupplier = selectedRows[0];
                    const supplierNameInput = document.getElementById('supplier-name');
                    const supplierCodeInput = document.getElementById('supplier-code');
                    const contactNameInput = document.getElementById('supplier-contact-name');
                    const contactPhoneInput = document.getElementById('supplier-contact-phone');

                    if (supplierNameInput) {
                        supplierNameInput.value = selectedSupplier.supplierName;
                        this.combinedObject.supplier.supplierName = selectedSupplier.supplierName;
                    }
                    if (supplierCodeInput) {
                        supplierCodeInput.value = selectedSupplier.supplierCode;
                        this.combinedObject.supplier.supplierCode = selectedSupplier.supplierCode;
                    }
                    if (contactNameInput) {
                        contactNameInput.value = selectedSupplier.contactinfo.name;
                        this.combinedObject.contactinfo.name = selectedSupplier.contactinfo.name;
                    }
                    if (contactPhoneInput) {
                        contactPhoneInput.value = selectedSupplier.contactinfo.phone;
                        this.combinedObject.contactinfo.phone = selectedSupplier.contactinfo.phone;
                    }
                }
                this.dialogVisible = false; // 关闭对话框
            },
            handleClose() {
                this.dialogVisible=false;
            },
            //查询所有员工
            getEmployeeList(){
                this.$axios.get("manage/employee/list").then(
                    response=>{
                        this.employeeList=response.data.data;
                    });
            },
            //查询部门
            getWarehouses(){
                this.$axios.get("manage/warehouse/list").then(
                    response=>{
                        this.warehouselist=response.data.warehouselist;
                    });
            },
            //从数据库字典中获取部门
            getWarehouseNatureList(){
                this.$axios.get("manage/scmDictData/dictDataList",{
                    params: { dataType: 'warehouse_nature' }
                }).then(
                    response=>{
                        this.warehouseNatureList=response.data.dataType;
                    })
                    .catch(error => {
                        console.error("获取仓库性质数据失败：", error);
                        alert("获取失败,请刷新重试")
                    });
            },
            //部门性质改变事件
            handleNatureChange() {
                console.log(this.warehouse.nature);
            },
            //部门名称
            getProvinceCityCascade(){
                this.$axios.get("manage/city/provinceCityCascade").then(
                    response=>{
                        this.provinceCityCascade = response.data.provinceCityCascade;
                    });
            },

            //查询所有部门
            getCompanyDepartment() {
                this.$axios.get("manage/companyDepartment/list")
                    .then(response => {
                        this.companyDepartmentList = response.data.data;
                        // 进行数据过滤
                        this.companyDepartmentName = this.companyDepartmentList.map(item => {
                            return {
                                companyDepartmentId:item.id,
                                companyDepartmentName:item.name,
                                leader:item.leader,
                                children: []
                            };
                        });
                    })
            },
            //树形控件相关--添加仓库主管
            // 处理节点点击事件
            handleNodeClick(node) {
                if (node && node.companyDepartmentId) {
                    this.brevityCompanyDepartmentId = node.companyDepartmentId;
                    // 调用获取该部门员工的方法
                    this.getEmployeesByDepartmentId(node.companyDepartmentId);
                }
            },
            getEmployeesByDepartmentId(companyDepartmentId) {
                this.employeesInDepartment = this.employeeList.filter(employee => employee.companyDepartmentId === companyDepartmentId);
            },
            selectEmployee(employee) {
                this.tempSelectedLeader = employee.name;
            },
            submitMyForm(formName) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post("manage/supplier/add", this.combinedObject)
                            .then(response => {
                                // 成功处理逻辑
                                this.$message({
                                    message: '供应商信息录入成功,请前往审核',
                                    type: 'success',
                                });
                                // 关闭对话框并清空内容
                                this.dialogFormVisible = false;
                            })
                            .catch(error => {
                                // 错误处理逻辑
                                console.error("提交失败:", error);
                                this.$message.error('提交失败，请重试');
                            });
                    } else {
                        console.log('验证失败!');
                        return false;
                    }
                });
            },
            // 点击确定按钮的处理函数
            handleConfirm() {
                if (!this.brevityCompanyDepartmentId) {

                    alert('请选择一个部门');
                    return;
                }

                const selectedNode = this.companyDepartmentName.find(node => node.companyDepartmentId === this.brevityCompanyDepartmentId);

                if (!this.tempSelectedLeader) {
                    alert('请选择员工');
                    return;
                }
                this.dialogVisible1 = false;
                // const personSpan = this.$refs.ruleForm.$el.querySelector('#person');
                const personSpan = this.$refs.ruleForm.$el.querySelector('#purchaser');
                const person2Span = this.$refs.ruleForm.$el.querySelector('#person2');
                // 检查元素是否存在，避免报错
                if (personSpan) {
                    personSpan.innerHTML = this.tempSelectedLeader;
                }
                if (person2Span) {
                    person2Span.innerHTML = selectedNode.companyDepartmentName;
                }
                //给warehouse中的两条属性赋值
                this.warehouse.warehouseLeader = this.tempSelectedLeader;
                this.warehouse.companyDepartmentId =this.brevityCompanyDepartmentId;

                console.log(this.warehouse.companyDepartmentId)

            },
        }
    };
</script>
<style scoped>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
    }
    .supplier{
        margin-left: 3%;
        margin-bottom: 100px;
    }
    .content{
        margin-bottom: 22px;
    }
    #supplier-name,#supplier-contact-name,#supplier-code,#supplier-contact-phone,#order-name,#order-date,#delivery-date,#order-number{
        max-height: 20%;
        margin-bottom: 5px;
        font-weight: bold;
        margin-left: 0;
        max-width: 20%;
    }
    #supplier-contact-click,#purchaser,#person2{
        width: 20%;
        min-height: 30px;
        margin-bottom: 5px;
        font-weight: bold;
        margin-left: 0;
        margin-right: 18px;
    }

    .purchase-order-container {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align:left;
        margin-bottom: 20px;
    }
    a {
        max-width: 100%;
    }

    .tips {
        margin-bottom: 20px;
    }

    .tips p {
        margin: 10px 0;
    }

    form {
        display: flex;
        flex-direction: column;
    }

    .supplier-section{
        margin-bottom: 20px;
    }

    label {
        margin-bottom: 5px;
        font-weight: bold;
    }

    input[type="text"], input[type="date"], select {
        width: 25%;
        padding: 8px;
        margin-bottom: 30px;
        margin-left: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }


    #submit{
        padding: 2px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 15px;
        max-width: 80px;
        max-height: 25px;
    }
    .emypolo{
        cursor: pointer;
        :active:blue;
    }
</style>